<template>
  <a-col :span="$props.span" style="text-align: right">
    <a-button type="primary" @click="$emit('formSubmit')">查询</a-button>
    <a-button style="margin: 0 8px" @click="$emit('resetFields')">重置</a-button>
    <a style="font-size: 12px" @click="changeExpand">
      <template v-if="showAll">
        <UpOutlined />
      </template>
      <template v-else>
        <DownOutlined />
      </template>
      {{ showAll ? '折叠' : '更多' }}
    </a>
  </a-col>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  name: 'form_btn_query',
  components: {
    UpOutlined,
    DownOutlined
  },
  props: {
    span: { type: Number, default: 8, required: false } //query 查询表单 ，submit 信息输入表单
  },
  emits: ['changeExpand', 'resetFields', 'formSubmit'],
  setup(props, ctx) {
    const showAll = ref(false)
    const changeExpand = () => {
      showAll.value = !showAll.value
      ctx.emit('changeExpand', showAll.value)
    }
    return {
      showAll,
      changeExpand
    }
  }
})
</script>
